import 'package:flutter/material.dart';

import 'package:xunlongchi/util/app_util.dart';
import 'package:xunlongchi/widgets/animated_scale.dart';

///构建国际小时
class RoundHour extends StatefulWidget {
  const RoundHour({Key key}) : super(key: key);

  @override
  _RoundHourState createState() => _RoundHourState();
}

class _RoundHourState extends State<RoundHour> {
  bool _ready = false;

  @override
  void initState() {
    super.initState();

    () async {
      await Future.delayed(const Duration(milliseconds: 1400), () {
        setState(() {
          _ready = true;
        });
      });
    }();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      opacity: _ready ? 1 : 0,
      duration: const Duration(milliseconds: 500),
      child: AnimatedScale(
        scale: _ready ? 1 : 1.1,
        duration: const Duration(milliseconds: 500),
        child: const HourBody(),
      ),
    );
  }
}

///小时体
class HourBody extends StatelessWidget {
  const HourBody({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Widget> _item = Iterable<int>.generate(12)
        .map((i) => RotationTransition(
              turns: AlwaysStoppedAnimation(-15 * i / 360 - 90 / 360),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  RotatedBox(
                    quarterTurns: -1,
                    child: Text('${i + 12}'),
                  ),
                  RotatedBox(
                    quarterTurns: 1,
                    child: Text('$i'),
                  ),
                ],
              ),
            ))
        .toList();

    final double _hourSize = 900.px;

    return DefaultTextStyle(
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontSize: 40.sp,
        fontFamily: 'OS',
      ),
      child: SizedBox(
        width: _hourSize,
        height: _hourSize,
        child: Stack(
          alignment: Alignment.center,
          children: _item,
        ),
      ),
    );
  }
}
